<template>
  <div class="icons-warp">
    <swiper :options="swiperOptions">
      <swiper-slide>
        <div class="icons-item">
          <div class="icons-item-list">
            <li class="icons-nav-item-li" v-for="item in iconsList" :key="item.id">
              <a href="javascript:;" class="icons-nav-item-link">
                <div class="icons-nav-item-img">
                  <img :src="item.imgUrl" />
                </div>
                <span class="icons-nav-item-title">{{item.description}}</span>
              </a>
            </li>
          </div>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  export default {
    name: 'HomeIcons',
    props:{
      iconsList:Array
    },
    data: function() {
      return {
        swiperOptions: {
          loop: false,
          autoPlay: false
        }
      }
    }
  }
</script>

<style scoped>
  .icons-warp {
    width: 100%;
    height: 3rem;
    background-color: #eee;
  }

  .icons-warp .icons-item {
    width: 100%;
    height: 3rem;
    background-color: #EEEEEE;
  }

  .icons-warp .icons-item .icons-item-list {
    list-style: none;
  }

  .icons-warp .icons-item .icons-item-list .icons-nav-item-li {
    float: left;
    width: 20%;
    height: 1.5rem;
  }

  .icons-warp .icons-item .icons-item-list .icons-nav-item-li .icons-nav-item-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    align-items: center;
    width: 100%;
    height: 1.5rem;
  }

  .icons-warp .icons-item .icons-item-list .icons-nav-item-li .icons-nav-item-link .icons-nav-item-img {
    width: .98rem;
    height: .98rem;
  }

  .icons-warp .icons-item .icons-item-list .icons-nav-item-li .icons-nav-item-link .icons-nav-item-title {
    font-size: .12rem;
    color: #333;
    margin-top: .1rem;
  }

  img {
    width: 100%;
    height: 100%;
  }
</style>
